<template>
  <div id="box">
    <div id="zhong">
      <div id="da" v-for="book in arr" :key="book.id">
          <div id="yi">
              <img :src="book.img" alt="">
          </div>
          <div id="er">{{book.name}}</div>
          <div id="san">
              <div id="a">
                  <img :src="book.zheshangzhe" v-if="book.zheshangzhe">
              </div>
              <div id="b">
                  <img :src="book.shenghuoyuxuan" v-if="book.shenghuoyuxuan">
                  <!-- shenghuoyouxuan -->
              </div>
              <div id="c" :style="book.suose" v-if="book.lianggezi">{{book.lianggezi}}</div>
              <div id="d" :style="book.mise" v-if="book.xiaomiziying">{{book.xiaomiziying}}</div>
              <div id="e" :style="book.suose" v-if="book.sigezi">{{book.sigezi}}</div>
          </div>
          <div id="si">￥434</div>
      </div>
    </div>
  </div>
</template>

<script>
import getlink from "../../../../api/apiserver"
export default {
    data(){
        return{
            id:0,
            arr:[]
        }
    },
    mounted(){
        getlink("/readers").then((ok)=>{
            this.arr=ok.data
        })
    }
};
</script>

<style scoped>
#box {
  width: 100%;
}
#zhong {
  width: 95%;
  margin: auto;
   display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#da {
  width: 45.6vw;
  height: 69.0667vw;
 
}
#yi{
    width: 45.6vw;
    height: 45.6vw;
}
#yi img{
    width: 100%;
    height: 100%;
    border-radius: 0.1rem 0.1rem 0 0;
}
#er{
    width: 45.6vw;
    height: 5.3333vw;
    font-size: 3.7333vw;
    line-height: 5.3333vw;
}
#san{
    height: 6.2667vw;
    width: 45.6vw;
    display: flex;
}
#san #a img{
    width: 19.4667vw;
    height: 4.2667vw;
    margin-right: 1.3333vw;
    align-self: center;
}
#san #b img{
    width: 14vw;
    height: 4.2667vw;
    margin-right: 1.3333vw;
    align-self: center;
}
#c{
    align-self: center;
    width: 7.8667vw;
    height: 4.2667vw;
    text-align: center;
    line-height: 4.2667vw;
}
#d{
    align-self: center;
    width: 14.6vw;
    height: 4.2667vw;
    text-align: center;
    line-height: 4.2667vw;
}
#e{
    align-self: center;
    width: 14.6vw;
    height: 4.2667vw;
    text-align: center;
    line-height: 4.2667vw;
}
#si{
    width: 45.6vw;
    height: 5.8667vw;
    font-size: 4.2667vw;
    line-height: 5.8667vw;
    font-weight: 600;
}
</style>